<template>
    <div class="person">
        <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
        <button @click="changePrice">修改汽车价格</button>
        <br>
        <h2>游戏列表:</h2>
        <ul>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
        </ul>
        <button @click="changeFirstGame">修改第一个游戏的名字</button>
    </div>
</template>

<script lang="ts">
export default {
    name: 'Person',
    // setup() {
    //     let name = '张三'
    //     let age = 18
    //     let tel = '13823231414'

    //     function changeName() {

    //     }
    //     function changeAge() {

    //     }
    //     function showTel() {

    //     }
    //     return {name, age, tel, changeAge, changeName, showTel}
    // }
}
</script>

<script lang="ts" setup>
import { reactive } from 'vue';
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([
    { id: '01', name: '王者荣耀' },
    { id: '02', name: '原神' },
    { id: '03', name: '和平精英' }
])
function changePrice() {
    car.price += 10
}
function changeFirstGame() {
    games[0].name = '魔兽世界';
}
</script>

<style>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li {
    font-size: 20px;
}
</style>